<p>
	You can do filter table data, in this case with observables and our <code>NgbHighlight</code> component used in
	Typeahead
</p>

<form>
	<div class="mb-3 row">
		<label for="table-filtering-search" class="col-xs-3 col-sm-auto col-form-label">Full text search:</label>
		<div class="col-xs-3 col-sm-auto">
			<input id="table-filtering-search" class="form-control" type="text" [formControl]="filter" />
		</div>
	</div>
</form>

<table class="table table-striped">
	<thead>
		<tr>
			<th scope="col">#</th>
			<th scope="col">Country</th>
			<th scope="col">Area</th>
			<th scope="col">Population</th>
		</tr>
	</thead>
	<tbody>
		@for (country of countries$ | async; track country.name; let i = $index) {
			<tr>
				<th scope="row">{{ i + 1 }}</th>
				<td>
					<img
						[src]="'https://upload.wikimedia.org/wikipedia/commons/' + country.flag"
						[alt]="'The flag of ' + country.name"
						class="me-2"
						style="width: 20px"
					/>
					<ngb-highlight [result]="country.name" [term]="filter.value" />
				</td>
				<td><ngb-highlight [result]="country.area | number" [term]="filter.value" /></td>
				<td><ngb-highlight [result]="country.population | number" [term]="filter.value" /></td>
			</tr>
		} @empty {
			<tr>
				<td colspan="4" style="text-align: center">No countries found</td>
			</tr>
		}
	</tbody>
</table>
